<template>
  <div class="mark-container">
    <a-card class="card">
      <div class="content">
        <a-alert
          message="Markdown 是基于 md-editor-v3 插件完成， 官方文档请查看 ：https://imzbf.github.io/md-editor-v3/index"
          type="info"
        />
        <md-editor v-model="mdText" />
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { message } from "ant-design-vue";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { ref } from "vue";
const mdText = ref("### 你好呀，欢迎");
const config = ref({});

const onSubmit = () => {
  message.success({
    content: mdText.value,
  });
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.mark-container {
  margin: 20px;
  height: calc(100% - 80px);
  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
    :deep(.ant-card-body) {
      height: 100%;
    }
  }
  .content {
    display: flex;
    height: 100%;
    flex-direction: column;
    .md-editor {
      margin: 20px 0;
      flex: 1;
    }
  }
}
</style>
